<!-- NavForm.vue 头部搜索框的封装-->
<template>
  <!-- <el-form :inline="true" :model="searchInfo" class="demo-form-inline" @keyup.enter.native="onSubmit">
    <el-form-item
        v-for="item in searColumns"
        :key="item.model + item.label"
        :label-width="item.labelWidth"
    >
      <el-input v-if="item.type === 'input'" v-model="searchInfo[item.model]" :placeholder="item.placeholder"
                clearable></el-input>
      <el-select v-if="item.type === 'select'" v-model="searchInfo[item.model]" :placeholder="item.placeholder"
                 clearable>
        <el-option v-for="val in item.options" :key="val.value" :label="val.label" :value="val.value"></el-option>
      </el-select>
 
      <el-button v-if="item.type==='onSubmit'" icon="el-icon-search" type="primary" @click="onSubmit">查询
      </el-button>
 
      <el-button v-if="item.type==='onReset'" @click="onReset">重置</el-button>
    </el-form-item>
 
    <el-form-item
        style="float: right"
        v-for="item in searColumns"
        :key="item.model"
        :label-width="item.labelWidth"
    >
      <el-button v-if="item.type === 'add'" icon="el-icon-plus" type="primary" @click="addSubmit">{{ item.label }}
      </el-button>
    </el-form-item>
  </el-form> -->
  <el-form :inline="true" :model="searchInfo" class="demo-form-inline" @keyup.enter.native="onSubmit">
      <el-form-item
         v-for="item in searColumns"
        :key=" item.label"
        :label-width="item.labelWidth"
      >
      <el-input v-model="searchInfo.name" :placeholder="item.placeholder" clearable></el-input>
      <el-select  v-model="searchInfo.value" :placeholder="item.placeholder" clearable>
        <el-option v-for="val in item.Options" :key="val.value" :label="val.label" :value="val.value"></el-option>
      </el-select>
        <el-button  icon="el-icon-search" type="primary" @click="onSubmit">查询</el-button>
      
        <el-button  @click="onReset">重置</el-button>
      </el-form-item>
    </el-form>
</template>
 
<script>
export default {
  props: {
    searColumns: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {
      searchInfo: {
        name:'',
        value:''
      }
    };
  },
  methods: {
    onSubmit() {
      console.log('我是search',this.searchInfo)
      // 查询
      this.$emit('submit', this.searchInfo);
    },
    onReset() {
      // 重置
      this.searchInfo = {};
      this.$emit('reset');
    }
  }
};
</script>